import { connect } from 'umi';
import { Button } from 'antd';

const Counter = ({ count, dispatch }: any) => {
  const handleIncrement = () => {
    dispatch({ type: 'counter/increment' }); // 触发 increment reducer
  };

  const handleDecrement = () => {
    dispatch({ type: 'counter/decrement' }); // 触发 decrement reducer
  };

  const handleIncrementAsync = () => {
    dispatch({ type: 'counter/incrementAsync' }); // 触发 incrementAsync effect
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <div className='flex gap-2'>
        <Button onClick={handleIncrement}>Increment</Button>
        <Button onClick={handleDecrement}>Decrement</Button>
        <Button onClick={handleIncrementAsync}>Increment Async</Button>
      </div>
    </div>
  );
};

export default connect(({ counter }) => ({
  count: counter.count, // 将 counter Model 的状态映射到组件的 props
}))(Counter);